<template>
	<div class="guanZhu">
		<div class="dynamicNav">
			<DynamicNav :navTitle="navTitle" />
		</div>
		<router-link to="dynamicState">
			<img class="leftArrow" src="../../../assets/images/dynamicState/37/f-1.png" alt="" />
		</router-link>
		
		<div class="guanZhuBody" v-for="(item,index) in guanZhuData" :key="index">
		    <GuanZhuComponents :index="index" :item="item" />
	   </div>
	</div>
</template>

<script>
	import DynamicNav from '../dynamicPublic/dynamicNav'
	import GuanZhuComponents from './publicComponents/guanZhuComponents'
	export default{
		name:"guanZhu",
		data(){
			return{
				navTitle:"关注",
				guanZhu:"加关注",
				isIndex:null,
				nPicture: require("../../../assets/images/dynamicState/39/n.png"),
				guanZhuData:[],
				headImg: require("../../../assets/images/dynamicState/46/news.png"),			
			}
		},
		methods:{
			
		},
		created(){
			this.$axios.get("http://localhost:3000/guanZhuData")
			.then(res => {
				this.guanZhuData = res.data.guanZhuData
			})
			.catch(error => {
				console.log(error)
			})
		},
		components: {
			DynamicNav,
			GuanZhuComponents
		},
	}
</script>

<style scoped lang="less">
@current:100rem;
.dynamicNav {
	height: 88/@current;
}
	
.leftArrow {
	position: fixed;
	top: 26/@current;
	left: 40/@current;
	z-index: 333;
	width: 22/@current;
	
}
.guanZhuBody{
		height: 120/@current;
		width: 100%;
		margin-top: 30/@current;
		overflow: hidden;
		.heaPortrait {
			float: left;
			position: relative;
			margin-left: 20/@current;
			img {
				width: 80/@current;
				height: 80/@current;
				border-radius: 50%;
				position: absolute;
				top: 0
			}
		}
		
		.commentReply {
			float: right;
			margin-right: 20/@current;
			margin-left:20/@current;
			width: 500/@current;
			position: relative;
			img {
				width: 500/@current;
			}
			.chitchat {
				position: absolute;
				left: 22/@current;
				width: 100%;
				p {
					font-size: 28/@current;
				}
				p:first-of-type {
					position: absolute;
					color: #313131;
				}
				p:nth-of-type(2) {
					font-size: 24/@current;
					position: absolute;
					right: 32/@current;
					color: #A54BE8;
					padding:6/@current 10/@current;
					border:1/@current solid #A54BE8;
					border-radius: 6/@current;
					z-index:555;
				}
				.xianShi{
					color: #999!important;
					border:1/@current solid #999!important;
				}
				div{
					position:relative;
					margin-right:20/@current;
					/*padding-bottom:10/@current;*/
					border-bottom:1/@current solid #cfcdd3; 
					transform: translateY(-20/@current);
					  span{
					  	display:inline-block;
						/*margin-top: 30/@current;*/
						color: #1B1B1B;
						font-size: 32/@current;
						margin-right:32/@current;
						width:100%;
					  }
					  
				}
			}
		}
	}

	
</style>